<template>
	<!-- 订单预览界面 -->
	<view>
		<view class="wrap">
			<!-- top收货地址栏 -->
			<view class="address" @tap="routeAddress()">
				<view class="adress-detail">
					<view style="font-weight: 600;padding-bottom: 10rpx;">{{address.province}}{{address.city}}{{address.county}}{{address.address}}</view>
					<view style="font-size: 12px; color: #C0C0C0;">{{address.name}} {{address.phone}}</view>
				</view>
				<view class="icon-right">
					<u-icon name="arrow-right" label-color="#c0c0c0"></u-icon>
				</view>
			</view>
			<!-- 订单列表 -->
			<view class="book-list-card" v-for="(item,index) in orderPreview" :key="index">
				<u-card :border-radius="0" class="u-m-t-0 u-m-b-0 u-m-l-10" style="background-color: hsl(0, 0%, 98%);" :border="false"
				 :head-border-bottom="false" :foot-border-top="false" :show-head="false">
					<view class="order-list" slot="body">
						<image :src="item.goods.cover_url" style="width: 160rpx;height: 160rpx;" class="book-image"></image>
						<view class="book-detail">
							<view style="font-size: 12px;">{{item.goods.title}}</view>
							<view style="font-size: 9px;color: #999999;">{{item.goods.description}}</view>
							<view class="">
								<view style="color:#cc0000;font-weight: bold;">￥{{item.goods.price}}</view>
							</view>
						</view>
						<view class="book-number">
							×{{item.num}}
						</view>
					</view>
				</u-card>
			</view>
		</view>
		<view class="u-line-1 u-flex bottom-price">
			<text class="">
				合计:<text style="color:#cc0000 ;font-weight: 800;font-size: 16px;">￥{{total}}</text>
			</text>
			<u-button @tap="goSettlement" class="btn_style" size="medium" style="display: inline-block;" type="error" shape="circle" :disabled="disabled">提交订单
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressId:'',
				address: '',
				bookId: '',
				bookMessage: '',
				// 订单预览数据
				orderPreview: [],
				total: '',
				order_no:'',
				disabled:true
			}
		},
		methods: {
			calculateTotal() {
				// console.log(this.list)
				this.total = this.orderPreview.filter(item => {
					return item.is_checked == 1
				}).reduce((pre, now) => {
					return pre + (now.num * now.goods.price)
				}, 0)
				console.log(this.total)
			},
			routeAddress() {
				uni.navigateTo({
					url: "/pages/userInfoChange/adreess"
				})
			},
			// 获取地址信息
			async getAddress() {
				if(this.addressId===''){
					this.disabled=true
				}else{
					await this.$u.get('/api/address/' + this.addressId).then(res => {
						this.address = res.data;
						this.disabled=false
					}).catch(err => {
						console.log(err)
					})
				}
				
			},
			// 获取订单预览数据
			async getBookData() {
				await this.$u.get('/api/orders/preview').then(res => {
					this.orderPreview = res.data.carts;
					console.log(res);
					console.log(this.orderPreview)
					this.calculateTotal();
					this.cartNum = res.data.carts.length
				})
			},
			// 提交订单
			async goSettlement(){
				const params={
					address_id:this.addressId
				}
				await this.$u.post('/api/orders', params).then(res => {
						uni.$u.route({
							type: 'navigateTo',
							url: 'pages/payOrder/payOrder'
						})
						// 订单编号
						this.order_no=res.data.order_no
						uni.$on('send',res=>{
							uni.$emit('orderId',this.order_no)
						})
						// console.log(res.data.order_no)
					}).catch(err => {
						console.log(err)
					})
			}
		},
		async onShow() {
			// 取到addressId
			this.addressId = uni.getStorageSync('address')
			this.getAddress()
			this.getBookData()
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx 40rpx 260rpx 40rpx;
	}

	.address {
		display: flex;
		justify-content: space-between;
		padding-bottom: 40rpx;

	}

	.adress-detail {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.icon-right {
		line-height: 41px;
	}

	.order-list {
		display: flex;
		justify-content: space-between;

		.book-image {
			flex: 3;
		}

		.book-number {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding-bottom: 10rpx;
		}

		.book-detail {
			flex: 6;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}

	.u-card {
		border: 1px dashed #cccccc;
		border-radius: 12px !important;
	}

	.book-list-card {
		padding-bottom: 40rpx;
	}

	.bottom-price {
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: calc(var(--window-bottom, 0) + 0rpx);
		width: 100%;
		background-color: #f3f4f6;
		padding: 40rpx 0;
	}

	.btn_style {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
</style>
